var legendPanelHTML =
								   '<div id="legendpanelContent">'+
								   '<div class="grade">小型&nbsp;&nbsp;&nbsp;&nbsp;中型&nbsp;&nbsp;&nbsp;&nbsp;大型&nbsp;&nbsp;&nbsp;&nbsp;巨型</div>'+
								   '<div class="explainImg"></div><div class="explain">灾情程度:</div>'+
								   '<div class="legendImgDiv">'+
								   		'<div class="BTLegendImg"><div id="sgradeBT" class="BTImg"></div><div id="mgradeBT" class="BTImg"></div><div id="bgradeBT" class="BTImg"></div><div id="lgradeBT" class="BTImg"></div></div>'+
								   		'<div class="HPLegendImg"><div id="sgradeHP" class="HPImg"></div><div id="mgradeHP" class="HPImg"></div><div id="bgradeHP" class="HPImg"></div><div id="lgradeHP" class="HPImg"></div></div>'+
								   '</div>'+
								   '<div class="wordBT">崩塌'+
								   '</div>'+
								   '<div class="wordHP">滑坡'+
								   '</div>'+
								   '<div id="HASBtn" class="showLegendPanel"></div>'+
								   '</div>';

//'<div id="legendpanel">'+
//'</div>'+

//加载图例板
function loadLegendPanel(){
	if(globalLegendPanel!=null){
		globalLegendPanel.remove();
	}
	$("body").append(legendPanelHTML);
	//legendPanelInit();
	globalLegendPanel = $("#legendpanelContent");
	//灾害分布  事件绑定
	
}


//对伸缩按钮的监听
function legendPanelInit(){
	$("#HASBtn").attr("title","收缩");
	$("#HASBtn").click(hideAndShowLegendPanel)
}

//点击按钮之后的方法
function hideAndShowLegendPanel(evt){
	var divId = evt.srcElement.id;
	if($("#"+divId).attr("class")=="showLegendPanel"){//如果展开，那么收缩
		$("#"+divId).attr("title","展开");
		$("#"+divId).attr("class","hideLegendPanel");
		$("#legendpanel").stop().animate({
    		left: "-294px"
        }, { duration: 500 });
		$("#legendpanelContent").stop().animate({
			left: "-294px"
        }, { duration: 500});
	}else{//如果收缩，那么展开
		$("#"+divId).attr("title","收缩");
		$("#"+divId).attr("class","showLegendPanel");
		$("#legendpanel").stop().animate({
			left: "0px",
        }, { duration: 500 });
		$("#legendpanelContent").stop().animate({
			left: "0px"
        }, { duration: 500 });
	}
	
}